<template>
    <div class="layout" style="height: 100%;">
        <el-tabs v-model="activeName2" type="border-card" style="height: 68%;">
            <el-tab-pane label="浏览" name="first" style="height: 100%;">
              <div class="container">
               <el-row class="tac" :gutter="20">
                <!-- <Row type="flex" style="height: 100%;"> -->
                   <el-col :span="5" class="tree">
                        <!--树形导航 -->
                        <div class="dataSource">
                            <el-tree class="elTree" :data="treedata"  node-key="id" default-expand-all :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick" ></el-tree>
                        </div>
                        <div class="layout-tree-button buttonGroup">
                          <el-button type="primary" plain icon="el-icon-plus" size="small"  @click="showMappingDateGired()" >增加</el-button>
                          <el-button type="primary" plain icon="el-icon-minus" size="small">删除</el-button>
                        </div>
                   </el-col>
                   <!-- <el-col :span="1">
                     &nbsp;
                   </el-col> -->
                   <el-col :span="19">
                    <div class="layout-right">
                      <!-- 表格1区域-->
                    <div class="breadcrumb" style="float:left;">
                       <span><dynamicbread :breadData="breadData1" ></dynamicbread></span>
                    </div>
                     <div v-if="checkIf==1">                     
                     <div class="decorationLine"></div>
                     <div class="table1">
                      <el-row>
                        <span class="des">基本信息</span>
                      </el-row>                       
                      <el-row>
                          <span><freeTable :tableData="tableData1" width="100%"></freeTable></span>
                      </el-row>
                     </div>

                     <div class="decorationLine"></div>
                     <div class="table2">
                      <el-row>
                        <span class="des">属性信息</span>
                      </el-row>                        
                      <el-row>
                      <table class="propertyTable" width="100%">
                        <tr>
                          <td width="30%" height="30px">名称</td>
                          <td >{{propertyName}}</td>
                        </tr>
                        <tr>
                          <td width="30%" height="30px">描述</td>
                          <td width>{{propertyDescribe}}</td>
                        </tr>
                      </table>
                      </el-row>
                     </div>
                   
                      <div class="decorationLine"></div>
                      <!-- 表格2区域-->
                      <div class="table3" >
                        <el-row>
                          <span class="des">结构信息</span>
                        </el-row>
                        <el-row>
                          <el-table class="viewTable2" :data="attributeData" border highlight-current-row  style="width:100%; margin-top:0.5%" max-height="200">
                            <el-table-column  prop="fieldname" label="字段名" width="200"  align="center">
                            </el-table-column>
                            <el-table-column  prop="defaultvalue" label="默认值"  width="100" align="center">
                            </el-table-column>
                            <el-table-column prop="type" label="类型" width="170" align="center">
                            </el-table-column>
                            <el-table-column prop="isprimarykep" label="是否主键"  align="center">
                            </el-table-column>
                            <el-table-column prop="isforeignkey" label="是否外键"  align="center">
                            </el-table-column>
                            <el-table-column prop="isempty" label="是否为空"  align="center">
                            </el-table-column>
                            <el-table-column prop="describe" label="业务描述" width="100" align="center">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="120" align="center">
                              <template slot-scope="scope">
                                <el-button type="text" size="small" @click="edit(scope.row)">
                                修改
                                </el-button>
                                <el-button type="text" size="small" @click="deletefield(scope.row)">
                                删除
                                </el-button>
                              </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="实例" width="70" align="center">
                              <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                  <font size="2">最新实例数据：</font>
                                  <p>实例1: {{ scope.row.example1}}</p>
                                  <p>实例2: {{ scope.row.example2}}</p>
                                  <p>实例3: {{ scope.row.example3}}</p>
                                  <p>实例4: {{ scope.row.example4}}</p>
                                  <p>实例5: {{ scope.row.example5}}</p>
                                  <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">实例</el-tag>
                                  </div>
                                </el-popover>
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-row>
                       </div>
                     </div>    
                     <div v-if="checkIf==2"> 
                      <div class="decorationLine"></div>
                      <div class="table1">
                        <el-row>
                          <span class="des">基本信息</span>
                        </el-row>                       
                        <el-row>
                          <span><freeTable :tableData="tableDataCorre" width="100%"></freeTable></span>
                        </el-row>
                      </div>
                      <div class="decorationLine"></div>
                      <div class="table3" >
                        <el-row>
                          <span class="des">结构信息</span>
                        </el-row>
                        <el-row>
                          <el-table class="viewTable2" :data="attributeDataCorre" border highlight-current-row  style="width:100%; margin-top:0.5%" max-height="250">
                            <el-table-column  prop="targetField" label="字段名" width="170"  align="center">
                            </el-table-column>
                            <el-table-column  prop="targetSystem" label="目标系统"  width="170" align="center">
                            </el-table-column>
                            <el-table-column  prop="targetDatasource" label="目标源"  width="170" align="center">
                            </el-table-column>                            
                            <el-table-column prop="targetDatabase" label="目标数据库" width="170" align="center">
                            </el-table-column>
                            <el-table-column prop="targetTables" label="目标表" width="170"  align="center">
                            </el-table-column>
                            <el-table-column prop="targetFieldDescription" label="目标字段业务描述"
                            width="200"  align="center">
                            </el-table-column>
                            <el-table-column prop="sourceSystem" label="源系统" width="170" align="center">
                            </el-table-column>
                            <el-table-column prop="sourceDatasource" label="源数据源" width="170" align="center">
                            </el-table-column>
                            <el-table-column prop="sourceDatabase" label="源数据库" width="170" align="center">
                            </el-table-column>                            
                            <el-table-column prop="sourceTables" label="源表" width="170"  align="center">
                            </el-table-column>
                            <el-table-column prop="sourceField" label="源字段" width="170" align="center">
                            </el-table-column>
                            <el-table-column prop="sourceFieldDescription" label="源字段业务描述" width="200" align="center">
                            </el-table-column>                           
                          </el-table>
                        </el-row>
                       </div>

                    </div>  
                      <!-- 表格2的修改按钮弹窗-->
                      <el-dialog width="40%" title="属性信息修改" :visible.sync="dialogFormVisible" size="tiny">
                        <el-form :model="form">
                          <el-form-item label="字段名称" :label-width="FormLableWidth">
                            <el-input v-model="form.fieldname" auto-complete="off" disabled></el-input>
                          </el-form-item>

                          <el-form-item label="业务描述" :label-width="FormLableWidth">
                            <el-input v-model="form.serviceDescription" auto-complete="off"></el-input>
                          </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                          <el-button @click="dialogFormVisible = false">取 消</el-button>
                          <el-button type="primary" @click="editAtrributePost()">确 定</el-button>
                        </span>
                      </el-dialog>
                      <!-- 表格2的删除按钮弹窗-->
                      <el-dialog width="40%" title="属性信息删除" :visible.sync="dialogFormVisible1" size="tiny">
                        <el-form :model="deleteform">
                          <span>确认删除吗</span>
                        </el-form>
                          <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                            <el-button type="primary" @click="deletefieldPost()">确 定</el-button>
                          </span>
                      </el-dialog>
                      <!-- 表格2的提示弹窗-->
                      <el-dialog width="30%" title="提示" :visible.sync="dialogFormVisible2" size="tiny">
                        <span>{{information}}</span>
                        <span slot="footer" class="dialog-footer">
                          <el-button type="primary" @click="updateTable()">确 定</el-button>
                        </span>
                      </el-dialog>
                      <el-dialog width="30%" title="提示" :visible.sync="dialogSetTableVisible" size="tiny">
                        <span>{{setTableInfo}}</span>
                        <span slot="footer" class="dialog-footer">
                          <el-button type="primary" @click="">确 定</el-button>
                        </span>
                      </el-dialog>
                    </div>
                  </el-col>
                </el-row>
               </div>               
            </el-tab-pane>

            <el-tab-pane label="查询" name="second">
                <!-- 查询板块-->
              <div class="layout-select">
                <div class="selectkey">
                 <span class="des">输入查询条件</span>
                 <el-input v-model="selectinfo"  placeholder="关键字" auto-complete="off" style="width:70%;"></el-input>
                <el-button type="primary" plain icon="el-icon-search"   @click="selectPost()">查找</el-button>
                </div>

              <div class="decorationLine"></div>
              <div class="layout-select-table">
                    <span class="des">查询结果</span>
                    <el-table :data="selectTable"  border highlight-current-row  style="width: 100%;margin-top:10px;" max-height="250">
                        <el-table-column  prop="name" label="元数据名称"  color="#A0522D" align="center">
                        </el-table-column>
                        <el-table-column  prop="type" label="元数据类型"  align="center">
                        </el-table-column>
                        <el-table-column prop="describe" label="元数据业务描述" width="300" align="center">
                       </el-table-column>
                        <el-table-column prop="location" label="元数据位置" width="200" align="center">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="150" align="center">
                            <template slot-scope="scope" >
                                <el-button type="text" size="small" @click="detail(scope.row)">详情 </el-button>
                                <el-button type="text" size="small" @click="selectDeleteSingle(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
              </div>
                <!-- 详情关系表元模型弹窗-->
                <!-- 详情弹窗-->
                <el-dialog width="45%" title="元数据详情" :visible.sync="dialogFormVisible5" >
                 <el-row>
                  <span><freeTable :tableData="tableData2" :tableStyle="{ width:'400px' } " align="center"></freeTable></span>
                 </el-row>
                 <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dialogFormVisible7=true">修改</el-button>
                  <el-button  @click="dialogFormVisible6=true">删除</el-button>
                 </span>
               </el-dialog>
               <!-- 详情弹窗内删除-->
               <el-dialog width="40%" title="元数据删除" :visible.sync="dialogFormVisible6">
                <el-form :model="selectDeleteForm">
                  <span>确认删除吗</span>
                </el-form>
                  <span slot="footer" class="dialog-footer">
                   <el-button @click="dialogFormVisible6=false">取 消</el-button>
                   <el-button type="primary" @click="selectDeletePost()">确 定</el-button>
                  </span>
              </el-dialog>
              <!-- 详情弹窗内修改-->
              <el-dialog width="40%" title="属性信息修改" :visible.sync="dialogFormVisible7">
                <el-form :model="selectEditForm">
                  <el-form-item label="请输入业务描述" :label-width="FormLableWidth">
                    <el-input v-model="selectEditForm.serviceDescription" auto-complete="off"></el-input>
                  </el-form-item>
                </el-form>
                  <span slot="footer" class="dialog-footer">
                   <el-button @click="dialogFormVisible7=false">取 消</el-button>
                   <el-button type="primary" @click="selectEditPost()">确 定</el-button>
                  </span>
               </el-dialog>

                <!-- 查询区的提示弹窗-->
                <el-dialog width="30%" title="提示" :visible.sync="dialogFormVisible4" size="tiny">
                  <span>{{warning}}</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary"  @click="selectUpdate()">确 定</el-button>
                  </span>
                </el-dialog>
            </el-tab-pane>
        </el-tabs>

        <el-dialog
                      title="新建关系表字段映元数据"
                      style="font-size:20px;"
                      :visible.sync="centerDialogVisible"
                      height="100"
                      width="90%"
                      center>
                <div class="block" style="margin-left:10px;">
                  <span class="demonstration">目标表选择&nbsp;&nbsp;</span>
                    <el-cascader
                      :options="targetDateBaseTree"

                      v-model="databasetable">
                    </el-cascader>
                  <span class="demonstration" style="margin-left:300px;">源表选择&nbsp;&nbsp;</span>
                    <el-cascader
                      expand-trigger="hover"
                      :options="sourceDatabaseTree"
                      v-model="sourceDateBaseTable">
                    </el-cascader>
                </div>
                <br/>&nbsp;&nbsp;
                <span v-show="isShowAddMapButton">
                  <el-button type="primary" size="small"  plain @click="cancalMapTargetTableToSource()">取 消</el-button>
                  <el-button type="primary" size="small"  plain @click="SureMapTargetTableToSource()">确 定</el-button>
                </span>
              <span class="addtablemap_font_style" v-show="isShowdateGirdTable">
                <br/><br/>
                    &nbsp;&nbsp;为数据仓库-{{ }}-数据库表-{{ }}-中字段指定对应的来源字段：
                <br/><br/>
                  <el-table
                        :data="soursetogargetable"
                        align="center"
                        height="300">
                        <el-table-column
                          fixed="left"
                          prop="name"
                          label="字段名"
                          width="">
                        </el-table-column>
                        <el-table-column
                          fixed="left"
                          prop="describe"
                          label="业务名"
                          width="">
                        </el-table-column>

                        <el-table-column
                          prop="sourceSystem"
                          label="来源系统"
                          width="">
                        </el-table-column>
                        <el-table-column
                          prop="datasource"
                          label="来源数据源"
                          width="">
                        </el-table-column>
                        <el-table-column
                          prop="sourceDatabase"
                          label="来源数据库"
                          width="">
                        </el-table-column>
                        <el-table-column
                          prop="sourceTables"
                          label="来源表"
                          width="">
                        </el-table-column>
                        <el-table-column
                          prop="sourceField"
                          label="来源字段"
                          width="">
                        </el-table-column>
                        <el-table-column
                          prop="sourceFieldDescription"
                          label="来源业务名"
                          width="">
                        </el-table-column>
                        <el-table-column
                          prop="operation"
                          label="操作"
                          width="">
                        <template slot-scope="scope">
                            <el-button
                              type="primary"
                              size="small" 
                              icon="el-icon-plus" 
                              plain
                              @click="handleEdit(scope.$index, scope.row)">添加映射
                            </el-button>
                        </template>
                        </el-table-column>
                  </el-table>
                  <br/>
                  <span slot="footer"  class="dialog-footer">
                      <el-button type="primary" size="small"  plain @click="centerDialogVisible = false">取 消</el-button>
                      <el-button type="primary" size="small"  plain @click="competeMappingTable()">确 定</el-button>
                  </span>
                </span>  
        </el-dialog>

        <!--内层dialog的显示-->
        <el-dialog title=" 数据库表字段与来源数据库表字段映射" :visible.sync="dialog_in_FormVisible"
        center>
        <el-form :model="formdata">
          <el-form-item label="来源字段" :label-width="formLabelWidth">
            <el-select v-model="formdata.source_property" placeholder="请选择活动区域" @change="changePropertyMethod()">
              <el-option
                    v-for="item in source_property"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
              </el-option>
            </el-select>
             &nbsp;&nbsp;
             
          </el-form-item>

          <el-form-item label="来源字段业务名" :label-width="formLabelWidth">  
            <el-input v-model="form.source_servicename" auto-complete="off" placeholder="请填入来源字段业务名"></el-input>
          </el-form-item>

        </el-form>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字段示例:<template v-for="(item,index) in ExempleGridData">
                 {{item.example}},&nbsp;
             </template>,&nbsp;&nbsp;,
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small"  plain @click="dialog_in_FormVisible = false">取 消</el-button>
          <el-button type="primary" size="small"  plain  @click="startOperationMapper()">确 定</el-button>
        </div>
      </el-dialog>

      <!--示例展示的dialog

      <el-dialog title="字段示例展示" :visible.sync="dialogTable_Visible"
      center>
         <el-table :data="ExempleGridData"
         style="width: 40%;"
         height="250"
         center>
            <el-table-column property="example" label="示例展示" width="220"></el-table-column>            
        </el-table>
      </el-dialog>

      -->
      <div class="viewButton">
        <el-button type="primary" plain size="small"  >血统分析</el-button>
        <el-button type="primary" plain size="small"  >影响分析</el-button>
        <el-button type="primary" plain size="small"  >全链分析</el-button>    
      </div> 
  </div>

</template>

<script>
import axios from 'axios'
import qs from 'qs'
import freeTable from '@/components/comp/freeTable'
import dynamicbread from '@/components/comp/dynamicbread'
export default {
  components:{
  freeTable,
  dynamicbread
  },
  data () {
    return {

        tempRoure: '',
        input:'',
        activeName2:'first',//标签页默认值
        //导航栏树数据
        treedata:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        breadData1:[],
        levelIf:0,//树节点层level
        tableData1:[],//表基本信息表的参数
        propertyName:'',//表属性信息属性名称
        propertyDescribe:'',//表属性信息属性描述
        attributeData:[],//表属性信息表数据
        tableDataCorre:[],//映射基本信息
        attributeDataCorre:[],//映射结构信息表
        rootIf:0,//判断根节点
        checkIf:0,//判断类型
        dialogFormVisible:false,//浏览版块修改弹窗
        dialogFormVisible1:false,//浏览版块删除弹窗
        dialogFormVisible2:false,//操作结果弹窗

        dialogFormVisible4:false,//查询区结果提示
        dialogFormVisible5:false,//查询区详情弹窗
        dialogFormVisible6:false,
        dialogFormVisible7:false,
        dialogSetTableVisible:false,
        setTableInfo:'',//设置表后弹窗信息
        information:'提示',
        //浏览区修改弹窗
        form:{
          fieldid:'',
          fieldname:'',
          serviceDescription:''

        },
        FormLableWidth:'120px',
        //浏览区删除弹窗
        deleteform:{
          fieldID:''
        },
        //点击树节点的表id
        tableID:'',
        tableName:'',
        //查询结果表
        selectTable:[],
        //查询关键字
        selectinfo:'',
        //查询提示框内信息
        warning:'',
        //查询区详情弹窗内表
        tableData2:[],
        falg:'',//查询区暂存元模型类型
        metaid:'',//查询区暂存元数据id
        selectEditForm:{},
        selectDeleteForm:{},


        //添加模块的数据部分；
        formdata:{
          propertyname:'',   //仓库中的字段名
          source_property:'', //来源字段
          source_servicename:'' //来源字段业务名
        }, //来源字段表格显示
        ExempleGridData:[], //示例展示表格展示
        isShowAddMapButton:true,  //控制显示第一层对话框确定取消按钮
        isShowdateGirdTable:false,  //控制映射表的展示与否
        centerDialogVisible:false, //控制第一个dialog的显示与否
        dialog_in_FormVisible:false, //控制第二个dialog的显示与否
        // dialogTable_Visible:false, 控制第三个dialog的显示与否
        formLabelWidth: '120px',
        source_property:[], //来源表全部属性展示

        targetDateBaseTree:[],  //目标数据库联级树
        sourceDatabaseTree:[],  //源数据库联级树
        databasetable:[], //目标联级选择值选择----->目标数据库表
        sourceDateBaseTable:[], //源联级值选择 ----->源数据库表
        //映射表格数据展示
         soursetogargetable:[],
    };
  },
  created () {
    this.handleNodeClick_tree()
  },

 methods:
    {
        handleClick(tab, event) {
          console.log(tab, event);
        },
        //树形节点的点击事件
        handleNodeClick(h,node) {
        this.check(node);    
        let vm=this;
        vm.levelIf=node.level;
        vm.tableID=node.data.id;
        vm.tableName=node.data.lable;
        vm.breadData1=[];
        console.log(node);
        console.log(node.data.id);
        console.log(node.level);
        var i=node.level-1;
        this.bread(node,i);
        console.log(vm.breadData1);

        //标识该节点是表还是映射
        if(node.data.flag==="table") 
          vm.checkIf=1;
        else if(node.level==3&&vm.rootIf==2)
          vm.checkIf=2;
        else vm.checkIf=0;

        if(vm.checkIf==1){
          let params={
            id:node.data.id
          }
          axios.post('/kettleMetadataCollect/getMetadataTable',params)

          .then(function(response){
            console.log(response);
            console.log(response.data.data);
            vm.tableData1=response.data.data;
          })
          .catch(function(error){
            console.log(error);
          })
          axios.post('/kettleMetadataCollect/getMetadataTableField',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response);

          console.log(response.data.data);
          vm.attributeData = response.data.data;
          })
          .catch(function (error) {
          console.log(error);
          })
         
          axios.post('/metadata_relationtable/getMetadata_relationtableNameAndDescribeByid',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response);

          console.log(response.data.data);
          vm.propertyName = response.data.data.name;
          if(response.data.data.propertyDescribe==null)
          vm.propertyDescribe="暂未填写描述";
          else
          vm.propertyDescribe=response.data.data.describe;
          })
          .catch(function (error) {
          console.log(error);
          })
         }
         if(vm.checkIf==2){
         let params={
            id:node.data.id
          }
          axios.post('/metadata_tablemapping/getFieldMapping',params)

          .then(function(response){
            console.log(response);
            console.log(response.data.data);
            vm.tableDataCorre=response.data.data;
          })
          .catch(function(error){
            console.log(error);
          })
          axios.post('/metadata_tablemapping/getTableFieldMapping',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response);

          console.log(response.data.data);
          vm.attributeDataCorre= response.data.data;
          })
          .catch(function (error) {
          console.log(error);
          })            
         }
         console.log("test");
         console.log(vm.rootIf);
         console.log(vm.checkIf);
        },
        //标识根节点
        check(node){
           if(node.level==1){
              if(node.data.id==7)
                this.rootIf=2;//根节点是业务系统或数据仓库
              else
                this.rootIf=1;  //根节点是ETL              
           }else
           this.check(node.parent);
        },
        //递归活面包屑
        bread(node,i){
          if(node.level==1){
            this.breadData1[0]=node.data.label;
          }
          else
          {
            this.bread(node.parent,i-1);
            this.breadData1[i]=node.data.label;
            //console.log("bread");
            //console.log(node.data.label);
            //console.log(i);
          }
        },
        //console.log(data);
        //树形数据的初始化
        handleNodeClick_tree(data) {
          console.log(data);
          let vm = this
          axios.get('/sourcesystem/getFourMetamodelHierarchyList')
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response);
          console.log(response.data);
          vm.treedata = response.data.data;
          })
          .catch(function (error) {
          console.log(error);
          });
        },

        //浏览表编辑按钮
        edit (row) {
         console.log(row) ;
         let vm = this;
         //编辑对话框显示
         vm.dialogFormVisible = true;
        //清空相关数据
         vm.form.fieldid=row.id;
         vm.form.fieldname=row.fieldname;
         vm.form.serviceDescription= row.describe;
         },

        //浏览表删除按钮
        deletefield(row){
          let vm=this;
          //删除对话框显示
          vm.dialogFormVisible1 = true;
          vm.deleteform.fieldID=row.id;
        },
        //浏览表编辑框填好确认
        editAtrributePost(){
          let vm=this;
          console.log(vm.form);
          let params={
            id:vm.form.fieldid,
            describe:vm.form.serviceDescription
          }
          //修改相关属性
          axios.post('/kettleMetadataCollect/updateDescribe',params, {headers: {'content-type': 'application/json'}})
          .then(function(response){
            console.log("属性修改");
            console.log(response);
            console.log(response.data.result);
            vm.dialogFormVisible2=true;
            if(response.data.result==true){

              vm.information="属性描述修改成功";
            }
            else{
              vm.information="属性描述修改失败";

            }
          })
          .catch(function(error){
            console.log(error);
          })
        },
        //删除确认提交
        deletefieldPost(){
          let vm=this;
          let params={
            id:vm.deleteform.fieldID
          }
          axios.post('/kettleMetadataCollect/deleteMetadata',params, {headers: {'content-type': 'application/json'}})
          .then(function(response){
            console.log("属性删除提交");
            console.log(response);
            console.log(response.data.result);
            vm.dialogFormVisible2=true;
            if(response.data.result==true){

              vm.information="属性删除成功";
            }
            else{
              vm.information="属性删除失败";

            }
          })
          .catch(function(error){
            console.log(error);
          })
        },
        //编辑或删除完更新此表
        updateTable(){
          let vm=this;
          vm.dialogFormVisible=false;
          vm.dialogFormVisible1=false;
          vm.dialogFormVisible2=false;
          let params={
            id:vm.tableID
          }
          //更新属性表
          axios.post('/kettleMetadataCollect/getMetadataTableField',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response);
          console.log(response.data.data);
          vm.attributeData = response.data.data;
          })
          .catch(function (error) {
          console.log(error);
          })
        },

        //查询提交
        selectPost(){
        let vm=this;
        console.log(vm.selectinfo);
         if(vm.selectinfo==""){
          vm.$message('请输入关键字');
         }else{
          let params={
            name:vm.selectinfo
          }
          axios.post('/kettleMetadataCollect/searchMetadataTable',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response.data.result);
          console.log(response.data.data);
          if(response.data.result==true)
            {
                vm.selectTable=response.data.data;
            }
          else
            {
                vm.dialogFormVisible4=true;
                vm.warning="查询失败";
            }
          })
          .catch(function (error) {
          console.log(error);
          })
         }
        },
        //详情
        detail(row){
          let vm=this;
          vm.flag=row.flag;
          vm.metaid=row.id;
          console.log("详情ID");
          console.log(row.id);
          console.log(row.flag);
          let params={
            flag:row.flag,
            id:row.id
          }
          axios.post('/kettleMetadataCollect/getMetadataByIdAndFlag',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response.data);
            if(response.data.result==true){
            vm.dialogFormVisible5=true;
            vm.tableData2=response.data.data;
            }else{
              vm.dialogFormVisible4=true;
              vm.warning="详情获取失败";
            }
          })
          .catch(function (error) {
          console.log(error);
          })
        },

        selectEditPost(){
          let vm=this;
          console.log("修改");
          console.log(vm.flag);
          console.log(vm.metaid);
          console.log(vm.selectEditForm.serviceDescription);
          let params={
            flag:vm.flag,
            id:vm.metaid,
            describe:vm.selectEditForm.serviceDescription
          }
          axios.post('/kettleMetadataCollect/updateMetadataByIdAndFlag',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response.data);
            vm.dialogFormVisible4=true;
            if(response.data.result==true){
              vm.warning="修改成功·";
            }else{
              vm.warning="修改失败";
            }
          })
          .catch(function (error) {
          console.log(error);
          })
        },

        selectUpdate(){
          let vm=this;
          vm.dialogFormVisible4=false;
          vm.dialogFormVisible5=false;
          vm.dialogFormVisible6=false;
          vm.dialogFormVisible7=false;
          vm.selectEditForm.serviceDescription="";

          console.log("更新ID");
          console.log(vm.metaid);
          console.log(vm.flag);
          let params={
            name:vm.selectinfo
          }
          axios.post('/kettleMetadataCollect/searchMetadataTable',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response.data.result);
          console.log(response.data.data);
          if(response.data.result==true)
            {
                vm.selectTable=response.data.data;
            }
          else
            {
                vm.dialogFormVisible4=true;
                vm.warning="数据更新失败";
            }
          })
          .catch(function (error) {
          console.log(error);
          })

        },
        selectDeletePost(){
          let vm=this;
          console.log("删除");
          console.log(vm.metaid);
          console.log(vm.flag);
          let params={
            id:vm.metaid,
            flag:vm.flag
          }
          axios.post('/kettleMetadataCollect/deleteMetadataByIdAndFlag',params, {headers: {'content-type': 'application/json'}})
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
          console.log(response.data.result);
          console.log(response.data.data);
          vm.dialogFormVisible4=true;
          if(response.data.result==true)
            {
                vm.warning="删除成功";
            }
          else
            {
                vm.warning="删除失败";
            }
          })
          .catch(function (error) {
          console.log(error);
          })
        },
        //表内删除
        selectDeleteSingle(row){
          let vm=this;
          vm.metaid=row.id;
          vm.flag=row.flag;
          vm.dialogFormVisible6=true;
        },
        setSourceTable(){
          this.setTableInfo="源表成功设置为"+this.tableName;
          this.dialogSetTableVisible=true;
        },


        //添加模块的方法部分

        //点击添加按钮的动作
        showMappingDateGired(){
          let vm = this
          vm.centerDialogVisible=true;
          //两个联级框值归位
          vm.databasetable=[];
          vm.sourceDateBaseTable=[];
          //调用两个联级树
          vm.showTargetTree();
          vm.showSourceTree();
        },
        showTargetTree(){
          let vm = this 
          axios.get('/metadata_tablemapping/getTargetTableList')
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            vm.targetDateBaseTree = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
        },
        showSourceTree(){
          let vm = this 
          axios.get('/metadata_tablemapping/getSourceTableList')
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            vm.sourceDatabaseTree = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
        },

        //取消映射选择
        cancalMapTargetTableToSource(){
          let vm = this
          vm.databasetable=[];
          vm.sourceDateBaseTable=[];
        },
        // 确定添加映射的操作，展示数据
        SureMapTargetTableToSource(){
         let vm = this
          let params = {
             id: vm.databasetable[vm.databasetable.length-1],
          }
          axios.post('/datasource_connectinfo/getFields',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            vm.soursetogargetable = response.data.data;
           // vm.isShowAddMapButton=false;  确定按钮消失
            vm.isShowdateGirdTable=true;  // 数据表格展示
          })
          .catch(function (error) {
            console.log(error);
          });
        },

      


        //单击添加映射，触发的方法，添加来源字段进行选取
        handleEdit(index, row) {
          let vm=this
          vm.dialog_in_FormVisible=true;
          vm.formdata.propertyname=row.id;

            //展示数据源表下所有字段
            vm.showdatafield_in_sourcedata();
            //获取默认来源字段示例
            vm.showField_in_sourceTableExemple();
            //获取默认来源字段业务名
            vm.showdatadeclibse_in_sourcedata();
          },
            
          //查询来源数据库表下的所有字段
          showdatafield_in_sourcedata(){
                 let vm=this;
                    let params = {
                 id: vm.sourceDateBaseTable[vm.sourceDateBaseTable.length-1],
              }
              axios.post('/datasource_connectinfo/getFields',params)
              .then(function (response) {
                console.log(response);
                console.log(response.data.data);
                vm.formdata.source_property=response.data.data[0].id;
                console.log("查询来源数据库表下的所有字段，选中字段的ID"+vm.formdata.source_property);
                vm.source_property = response.data.data;
              })
              .catch(function (error) {
                console.log(error);
              });
          },
          //获取示例方法
            showField_in_sourceTableExemple() {
              // console.log(data);
                let vm = this
                var sourceDateBaseTableArray=vm.sourceDateBaseTable.length
                // vm.dialogTable_Visible=true;
                let params = {
                   datasourceid:vm.sourceDateBaseTable[sourceDateBaseTableArray-2],
                   tableid:vm.sourceDateBaseTable[sourceDateBaseTableArray-1],
                   fieldid:vm.formdata.source_property,
                } 
                axios.post('/datasource_connectinfo/getData',params)
                .then(function (response) {
                  console.log(response);
                  console.log(response.data.data);
                  //赋给的值待定
                  console.log("示例数组数据***********"+response.data.data);
                  vm.ExempleGridData = response.data.data;

                })
                .catch(function (error) {
                  console.log(error);
                });
            },
          //查询指定来源表--字段的描述
          showdatadeclibse_in_sourcedata(){
            console.log(true);
            let vm=this;
            let params = {
              id:vm.formdata.source_property,
            }
            axios.post('/datasource_connectinfo/getDescribe',params)
            .then(function (response) {
              console.log(response);
              console.log(response.data.data);
              //赋给的值待定
              vm.form.source_servicename = response.data.data.describe;
              console.log(vm.sourcefiledescribe);
            })
            .catch(function (error) {
              console.log(error);
            });
          },
            //<数据库表字段与来源数据库表字段映射>对话框，添加字段映射的方法
          startOperationMapper(){
              let vm=this
              console.log("添加字段映射的方法，源字段属性ID----"+vm.formdata.source_property);
              let params = {
            //源表ID
             srctableid:vm.sourceDateBaseTable[vm.sourceDateBaseTable.length-1],
             //源字段ID
             srcfieldid:vm.formdata.source_property,
             //目标表ID
             targettableid:vm.databasetable[vm.databasetable.length-1],
             //目标字段ID
             targetfieldid:vm.formdata.propertyname,
          }
            console.log(params)
          axios.post('/metadata_tablemapping/insertMapping',params)
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
             //内层对话框隐藏
            vm.dialog_in_FormVisible=false;
            console.log("添加成功后,显示添加映射后的表字段结果");
            //显示添加映射后的表字段结果
              vm.SureMapTargetTableToSource();
            //添加成功后表中数据要清空
            vm.formdata=[];
            vm.ExempleGridData=[];
          })
          .catch(function (error) {
            console.log(error);
          });
          },
          //来源数据库字段输入框改变时，所做的操作
          changePropertyMethod(){
            let vm = this
            vm.ExempleGridData=[];
            vm.showdatadeclibse_in_sourcedata();
            vm.showField_in_sourceTableExemple();
          },

          //点击确定按钮，进行的操作
          competeMappingTable(){
            let vm = this
            vm.centerDialogVisible = false;
            vm.soursetogargetable=[];
            vm.isShowdateGirdTable=false;
            //更新树
            vm.handleNodeClick_tree();
          },
          //联级框值改变进行的操作
          handleChange(value) {
           console.log(value);
         }
    }

}
</script>

<style scoped>
.des{
  font-size: 16px;

}
.el-tabs_header {
  margin: 0;

}
/* .borderStyle {
  border-bottom: 1px solid #d7dde4;
  border-left: 1px solid #d7dde4;
  border-right: 1px solid #d7dde4;
  margin-top: 15px;
} */
.layout{

    background: #EBEEF5;
    position: relative;
    height: 100%;
    min-width: 1300px;
}

.layout-content{
    min-height: 200px;
    margin: 15px;
    overflow: hidden;
    border-radius: 4px;

}

.layout-header{
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.layout-tablefirst{
  margin-top:5px;

}
.layout-tablesecond{
 margin-top:2%;
 min-height: 100px;

}
.layout-tree-button{
 margin-left: 15%;
}
.selectkey{
 padding:20px 0px 0px 0px;
 margin-left: 10%;
}
.layout-select{
 min-width: 1300px;
 background-color: #EBEEF5; 
 height:500px;

}
.layout-select-table{
 margin-top: 1%;
 margin-left: 10%;
 width:78%;
 background-color:#B9D3EE;

}

.addtablehead_font_style{
  font-size: 22px;
}
.addtablemap_font_style{
  font-size: 16px;
  margin-left:0px;
}
.breadcrumb {
  width:88%;
}
.elTree {
  font-size: 16px;
  background-color: #EBEEF5;
}
.buttonGroup{
  margin-top: 10px;
}
.decorationLine{
height:1px;
width:100%;
background:#B5B5B5;
overflow:hidden;
margin-top:2%;
margin-bottom:1%;
}
.dataSource{
  background-color: #EBEEF5;
  height:355px;
  overflow-y: scroll;
  width:260px;

}
.layout-right{ 
 
  margin-left:1%; 
  height:500px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.container{


}
.table1{
  background-color:#CAE1FF;
}
.table2{
  background-color:#BCD2EE;
}
.table3{
  background-color:#A2B5CD;
}
.viewButton{
  position:absolute;
  top:5px; 
  left:79%;
  width: 30%;
}
.propertyTable{
  border: 0px solid black;
  border-collapse:collapse;        /*为表格设置合并边框模型 */
  font-size:14px;
  text-align: center;
  background-color: black;
}


/*.layout-logo-left{
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
}*/

</style>
